import React, { Component } from "react";
import {
	View,
	Text,
	Image,
	StyleSheet,
} from "react-native";
import { DrawerItems } from "react-navigation";

import { InputItem } from "antd-mobile";

class CustomDrawerComponent extends Component {
	constructor(props) {
		super(props);
	}
	render() {
		return (
			<View style={ styles.container }>
				<InputItem 
					placeholder="搜索一下"
					style={ styles.searchText }
					placeholderTextColor={gColor.fontColorOne}
				/>
				<View style={ styles.imgView }>
					<Image style={ styles.imagebkg } source={require("../images/imagebkg.png")} >
						<Image style={ styles.imagebkg } source={require("../images/Layer.png")} />
						<Image style={ styles.imgIco } source={require("../images/status_label.png")} />
					</Image>
					<Text style={styles.perText}>Twanda <Text style={{color: gColor.fontColorThree}}>Keaton</Text></Text>
					<Text style={styles.proText}>Product Designer</Text>
				</View>
				<DrawerItems {...this.props} />
			</View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: "transparent",
	},
	searchText: {
		borderWidth: 1,
		width: gScreen.width * 0.5,
		height: 34,
		paddingTop: 7,
		marginTop: 14,
		borderRadius: 13,
		paddingLeft: 10,
		alignSelf: "center",
		alignItems: "center",
	},
	imgView: {
		marginTop: 30,
		alignSelf: "center",
	},
	imagebkg: {
		width: 125,
		height: 125,
	},
	perText: {
		color: gColor.fontColorTwo,
		alignSelf: "center",
		fontSize: gFontSize.one,
		marginTop: 13,
	},
	imgIco: {
		width: 25,
		height: 25,
		position: "absolute",
		bottom: -3,
		right: -5,
	},
	proText: {
		color: gColor.fontColorFour, 
		alignSelf: "center",
	},
})


export default CustomDrawerComponent;